<template>
  <div class="ruletitlebutton">
    <div style="display: flex; justify-content: space-between;">
      <el-button @click="Send">群发通知</el-button>
      <div>
        <el-button style="background-color: #2752fb; color: white"
          @click="$router.push('/home/employee/add')">添加员工</el-button>
        <el-button @click="daoruexcel">excel导入</el-button>
        <el-button @click="daochuexcel">excel导出</el-button>
      </div>
    </div>
    <Alert />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useStore } from '../../stores/counter'
import { exportStaff } from '@/api/staff'

import Alert from '@/components/alerts.vue'
const store = useStore()
const Send = () => {
  if (store.$state.Much.length == 0) {
    ElMessage.error('请选择员工')
    return
  } else {
    store.$state.dialogVisible = true
    store.$state.alerttitle = '群发通知'
  }

}
//导出
const daochuexcel = () => {
  exportStaff().then(res => {
    let blob = new Blob([res.data], {
      type: 'application/vnd.ms-excel;charset=UTF-8'
    })
    let elm = document.createElement('a')
    //创建下载的链接
    elm.setAttribute('download', '员工.xlsx')
    let href = window.URL.createObjectURL(blob)
    elm.href = href
    document.body.appendChild(elm)
    elm.click()
    //下载完成移除元素
    document.body.removeChild(elm)
    //释放掉blob对象
    window.URL.revokeObjectURL(href)
  })
}
const daoruexcel = () => {
  store.$state.dialogVisible = true
  store.$state.alerttitle = 'excel导入'
}
</script>

<style scoped>
.ruletitlebutton {
  .el-button {
    border-radius: 0px;
    font-size: 12px;
    height: 27px;
    line-height: 27px;
  }
}
</style>
